import React, { Component, Fragment } from 'react'
import { render } from 'react-dom'

import getUrlParams from '../js/getUrlParams'

import { getIndexData } from '../api'

import '../css/style.less'

import Top from './Top'

class App extends Component {
    state = {
        params: {
            studentId: 0,
            pictureBookId: 0,
            soundRecordId: 0
        },
        fullname: '',
        headImg: '',
        bookInfo: {},
        bookImgList: []
    }

    getIndexData = () => {
        this.setState({
            params: {
                studentId: getUrlParams('studentId'),
                pictureBookId: getUrlParams('pictureBookId'),
                soundRecordId: getUrlParams('soundRecordId')
            }
        }, async () => {
            const res = await getIndexData({
                studentId: this.state.params.studentId,
                id: this.state.params.pictureBookId
            })
        
            this.setState({ fullname: res.studentName })
            this.setState({ headImg: res.studentImg })
            this.setState({ bookInfo: res.data[0] })
            this.setState({ bookImgList: res.data.slice(1) })
        })
    }

    componentDidMount() {
        this.getIndexData()
    }

    render() {
        const { params, fullname, headImg, bookInfo, bookImgList } = this.state

        return (
            <Fragment>
                <Top />
                <div className="title">
                    <img src={headImg} />
                    <div>
                        <p>{fullname}邀请你一起来{params.soundRecordId > 0 ? '录' : '读'}绘本</p>
                        <p>《{bookInfo.name}》</p>
                    </div>
                </div>
                <div className="play">
                    <div className="border">
                        <div className="pic" style={{background: `url(${bookInfo.imgurl}) center / cover`}}>
                            <a className="btn" href={`play.html?studentId=${params.studentId}&soundRecordId=${params.soundRecordId}&pictureBookId=${params.pictureBookId}`}></a>
                        </div>
                    </div>
                </div>
                <a className="free-collection" href={`collection.html?studentId=${params.studentId}&pictureBookId=${params.pictureBookId}`}></a>
                <div className="book-list">
                    <div className="tit"></div>
                    <div className="list">
                        {bookImgList.map(item => (
                            <a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.clong.edu" key={item.id} style={{background: `url(${item.imgurl}) center / cover`}}></a>
                        ))}
                    </div>
                    <a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.clong.edu" className="read-more"></a>
                </div>
            </Fragment>
        )
    }
}

const el = document.getElementById('app')
el.className = 'index'

render(
    <App />,
    el
)